<template>
  <div class="register">
    <div class="registerBox">
      <h2>新用户注册</h2>
      <div class="newUsername">
        账号
        <input
          type="text"
          v-model="newusername"
          placeholder="请输入账号(不能为空)"
        />
      </div>
      <div class="errorTip" v-show="registerNamError">
        该用户已被注册！请更换账号
      </div>
      <div class="newPassword">
        密码
        <input
          type="password"
          v-model="newpassword"
          placeholder="请输入密码(最多不超过10位)"
        />
      </div>
      <div class="errorTip" v-show="registerPasError">账号或密码输入有误</div>
      <div class="loginTip">
        我已注册，前往<a @click="router.back()">登录</a>
      </div>
      <button class="registerBtn" @click="newRegisterFn">注册</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRegisterHttp, getUsersHttp } from '@/api/request/index.js'

/* 获取路由实例 */
const route = useRoute()
const router = useRouter()
/* 定义 新的用户名 和 密码 */
const newusername = ref('')
const newpassword = ref('')
/* 注册的 用户类型 */
const registerType = route.query.type
console.log('注册的用户类型', registerType) // 打印 注册的用户类型
/* 定义 已注册的某用户类型 的所有用户信息 */
const selectedUserData = ref([])
/* 定义 注册错误提示 */
const registerNamError = ref(false)
const registerPasError = ref(false)

/* 注册 不同用户类型 */
const newRegisterFn = async () => {
  // 校验账号是否已被注册
  if (
    selectedUserData.value.some(
      (item) => item.username === newusername.value
    ) &&
    newpassword.value !== ''
  ) {
    registerNamError.value = true
    registerPasError.value = false
    return
  } else if (
    newusername.value.trim() === '' ||
    newpassword.value === '' ||
    newpassword.value.length > 10
  ) {
    registerNamError.value = false
    registerPasError.value = true
    return
  } else {
    // 请求注册接口
    const res = await getRegisterHttp({
      username: newusername.value.trim(),
      password: newpassword.value,
      type: registerType,
    })
    console.log(res) // 打印 注册接口返回结果
    registerNamError.value = false
    registerPasError.value = false
    alert('注册成功，请前往登录')
    // 注册成功，跳转登录页面
    // router.back()
  }
}

onMounted(async () => {
  const res = await getUsersHttp({
    type: registerType,
  })
  selectedUserData.value = res.data.result
  console.log(selectedUserData.value) // 打印 已经注册的某用户类型的所有用户信息
})
</script>

<style scoped>
.register {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('@/images/register.jpeg');
  background-size: cover;
}
.registerBox {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  width: 380px;
  /* height: 300px; */
  background-color: #fff;
  padding: 0 45px;
  border-radius: 10px;
  box-shadow: 0 0 10px #999;
}
.register .registerBox h2 {
  font-size: 20px;
  color: #1061a4;
  text-align: center;
  padding: 5px 10px;
  margin: 20px 0;
}
.newUsername,
.newPassword {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-top: 10px;
}
.errorTip {
  font-size: 12px;
  color: red;
  padding-left: 15%;
}
.newUsername input,
.newPassword input {
  width: 85%;
  height: 30px;
  margin-left: 10px;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid #ccc;
  outline: none;
}
.loginTip {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-radius: 5px;
  margin: 20px 0 10px 0;
  border: none;
}
.loginTip a {
  color: #1061a4;
  text-decoration: none;
}
.loginTip a:hover {
  color: #2594ff;
  cursor: pointer;
}
.registerBtn {
  width: 100%;
  height: 40px;
  background-color: #0a3767;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 30px;
  border: none;
  cursor: pointer;
}
.registerBtn:hover {
  background-color: #1061a4;
}
</style>
